<template>
  <div>
    <el-container>
      <el-header class="header" style="text-align: left">
        <!--返回上一页-->
        <el-button type="primary" icon="el-icon-arrow-left" @click="goBack()">返回</el-button>
      </el-header>
      <el-container>
        <el-container>
          <el-main class="main">
            <!--阅卷内容开始-->
            <el-card class="box-card" style="margin-top: 20px">
              <template>
                <!--绑定数据-->
                <div style="line-height: 30px;" v-for="(p,index) in examData" :key="p.questionId">
                  <!--左上角小图标和题目序号-->
                  <div id="tag">
                    <b style="color: powderblue;margin-left: 13px">{{index+1}}</b>

                    <!--考试题目及题目总分-->
                    <b id="title">题目:
                      {{p.questionContent}}
                    </b>
                  </div>
                  <!--考试试题选项（非主观题才有）-->
                  <div style="text-align: left;margin-left: 50px" v-if="p.allOption.includes('￥&')">
                    <label   v-for="(qs,qIndex) in p.allOption.split('￥&')" :key="qIndex" style="display: block;margin: 10px 25px">
                      <h1 style="color: black;text-indent: 2em">{{qs}}</h1>
                    </label>
                  </div>

                  <!--学生解答内容-->
                  <div style="padding: 2% 5%;text-align: left">
                    <b>学生解答：</b>
                    <p style="margin: 5px auto;text-indent: 2em;">{{p.userAnswer }}</p>
                  </div>

                  <!--参考答案-->
                  <div v-if="p.trueOption.includes('￥&')" style="padding: 2% 5%;text-align: left">
                    <b style="color: red">参考答案:</b>
                    <p style="margin: 5px auto;text-indent: 2em;">{{p.trueOption}}</p>
                  </div>
                  <!--参考解析-->
                  <div style="padding: 2% 5%;text-align: left">
                    <b style="color: red;text-align: left">参考解析:</b>
                  </div>
                    <div style="text-align: left;margin-left: 50px" v-if="p.analysis.includes('￥&')">
                      <label   v-for="(qs,qIndex) in p.analysis.split('￥&')" :key="qIndex" style="display: block;margin: 10px 25px">
                        <h1 style="text-indent: 2em">({{qIndex+1}}) {{qs}}</h1>
                      </label>
                    </div>
                  <div style="padding: 2% 5%;text-align: left;text-indent: 2em;" v-else>
                    {{p.analysis}}
                  </div>
                  <!--得分-->
                  <span id="daFen">
                      <b>得分：{{p.getScore}}</b>
                      <span id="totalSc">
                        <b>此题总分：{{p.questionScore }}分</b>
                      </span>
                </span>
                  <el-divider><i class="el-icon-document"></i></el-divider>
                </div>
              </template>
            </el-card>
          </el-main>
        </el-container>
      </el-container>
    </el-container>
  </div>
</template>

<script>
import router from "@/router";

let localJwt = localStorage.getItem('localJwt');
export default {
 data(){
   return{
     examData:[],
     id:1,
   }
 },
  methods:{
    //退回上一页
    goBack(){
      this.$router.back();
    },
    loadList(id){
      let url = 'http://localhost:9283/examRecord/standardForStudent?id=' + id;
      console.log('url =' + url);

      this.axios
          .create({
            'headers': {
              // eslint-disable-next-line no-undef
              'Authorization': localJwt
            }
          })
          .get(url).then((response) =>{
        let jsonResult = response.data;
        console.log(jsonResult);
        if (jsonResult.state == 20000){
          this.examData = jsonResult.data;
          console.log(this.examData)
          if (jsonResult.jwt!=null){
            localStorage.setItem("localJwt",jsonResult.jwt);
          }
        }else if(jsonResult.state==70100){
          this.$alert(jsonResult.message, '错误', {
            confirmButtonText: '确定',
            callback: action => {
            }
          });
          this.$router.push('/')
        }else {
          this.$alert(jsonResult.message,'错误',{
            confirmButtonText:'确认',
            callback: action => {// eslint-disable-line no-unused-vars
              this.$router.back();
            }
          })
        }
      });
    },
  },
  mounted() {
    if (location.search.indexOf("id")!=-1){
      this.examData.id =location.search.split("=")[1];
      console.log("试卷id = " + this.examData.id);
      this.id = this.examData.id;
      this.loadList(this.examData.id);
    }else {
      this.loadList(1);
    }
  }
}
</script>

<style scoped>
.header, .footer {
  background-color: rgba(97,154,195,1);
  color: #444;
  line-height: 60px;
}

.main {
  background-color: rgba(97,154,195,0.9);
  color: #333;
  text-align: center;
  font-size: 22px;
  line-height: 160px;
}
#tag{
  text-align: start;background-image: url('~@/assets/examTitle.png');
  background-repeat: no-repeat;background-color: #ace0f9;
}

#title{
  padding-left: 12px;color:  #000000;background-color: #ace0f9;
  text-align: center;display: inline-block;margin: 5px 15px;font-size: 26px;
}

#totalSc{
  position: relative;left: 120px
}
#daFen{
  color: orangered; display: inline-block;margin-bottom: 2%
}
#scoreSelect{
  width: 200px;color: #409EFF;font-size: 20px;
}
</style>
